<!--
 * @Descripttion: 订单详情
 * @Author: xiao li
 * @Date: 2020-11-09 16:08:28
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-18 11:01:31
-->
<template>
  <div class="lb-malls-order-detail">
    <top-nav :isBack="true" />
    <div class="space-lg"></div>
    <!-- 订单信息 -->
    <div class="mg-lg">
      <div v-for="(citem, cindex) in detail.order_goods" :key="cindex">
        <div class="flex-warp pt-lg pl-lg pr-lg">
          <lb-image class="avatar radius-5" :src="citem.cover" />
          <div class="flex-1 mt-sm ml-md">
            <div class="flex-between">
              <div
                class="f-title c-title max-500 ellipsis"
                style="line-height: 1; margin-bottom: 4px"
              >
                {{ citem.title }}
              </div>
            </div>
            <div class="flex-between mt-lg">
              <div class="f-paragraph c-caption">x1</div>
              <div class="flex-y-center f-title">
                <div
                  class="f-paragraph c-caption text-delete"
                  v-if="citem.init_price"
                >
                  ¥{{ citem.init_price }}
                </div>
                <div class="c-title ml-md">¥{{ citem.price }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="space-lg"></div>
      <div
        class="ml-lg mr-lg pt-lg pb-sm b-1px-t"
        v-if="detail.record_money * 1 > 0"
      >
        <div class="flex-between mb-md f-paragraph c-title">
          <div>活动优惠</div>
          <div class="c-warning">- ¥{{ detail.record_money }}</div>
        </div>
      </div>
      <div class="ml-lg mr-lg pt-lg pb-lg b-1px-t">
        <div class="flex-between">
          <div></div>
          <div class="flex-y-baseline c-title">
            <div class="flex-y-baseline" v-if="detail.record_money * 1 > 0">
              已优惠
              <div class="c-warning mr-sm">¥{{ detail.record_money }}</div>
            </div>
            合计
            <div class="f-big-title ml-sm">¥{{ detail.pay_price }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 客户信息 -->
    <div class="mg-lg fill-base radius-15">
      <div class="flex-between f-title c-title pl-lg pr-lg h-100 b-1px-b">
        <div class="max-500 ellipsis">客户信息</div>
      </div>
      <div class="pd-lg f-paragraph c-caption">
        <div class="flex-warp mb-md f-paragraph c-caption">
          <div>微信昵称</div>
          <div class="c-title text-right flex-1 ml-md">
            {{ detail.nickName }}
          </div>
        </div>
        <div class="flex-warp mb-md f-paragraph c-caption">
          <div>电话号码</div>
          <div class="c-title text-right flex-1 ml-md">{{ detail.mobile }}</div>
        </div>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="mg-lg fill-base radius-15">
      <div class="flex-between f-title c-title pl-lg pr-lg h-100 b-1px-b">
        <div class="max-500 ellipsis">订单信息</div>
      </div>
      <div class="pd-lg f-paragraph c-caption">
        <div
          class="flex-between mb-md f-paragraph c-caption"
          v-if="detail.order_code"
        >
          <div>系统订单号</div>
          <div class="flex-y-center c-title">
            <div class="ellipsis" style="width: 400rpx">
              {{ detail.order_code }}
            </div>
            <div
              v-clipboard:copy="detail.order_code"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              class="copy-btn radius-5 f-icontext ml-sm"
            >
              复制
            </div>
          </div>
        </div>
        <div
          class="flex-between mb-md f-paragraph c-caption"
          v-if="detail.transaction_id"
        >
          <div>商户订单号</div>
          <div class="flex-y-center c-title">
            <div class="ellipsis" style="width: 400rpx">
              {{ detail.transaction_id }}
            </div>
            <div
              v-clipboard:copy="detail.transaction_id"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              class="copy-btn radius-5 f-icontext ml-sm"
            >
              复制
            </div>
          </div>
        </div>
        <div class="flex-between mb-md f-paragraph c-caption">
          <div>下单时间</div>
          <div class="c-title">{{ detail.create_time | handleTime }}</div>
        </div>
        <div class="flex-between mb-md f-paragraph c-caption">
          <div>订单状态</div>
          <div class="c-title">{{ payType[detail.pay_type] }}</div>
        </div>
      </div>
    </div>
    <div class="pd-lg">
      <lb-button type="primary" @click="goback">{{
        $t('action.back')
      }}</lb-button>
      <div class="space-lg"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      payType: {
        '-1': '已取消',
        1: '待付款',
        2: '已完成'
      },
      id: '',
      count: 3,
      detail: {},
      orderInfo: []
    }
  },
  created () {
    this.id = this.$route.query.id
    this.getOrderInfo()
  },
  methods: {
    onCopy (e) {
      this.$message.success(this.$t('tips.successClip'))
    },
    onError (e) {
      this.$message.success(this.$t('tips.failedClip'))
    },
    goback () {
      this.$router.back(-1)
    },
    /**
     * @method 获取订单详情
     */
    async getOrderInfo () {
      let { id } = this
      let { code, data } = await this.$api.payclassOrderInfo({ id })
      if (code !== 200) return
      data.record_money = (data.order_goods[0].price * 1 - data.pay_price * 1).toFixed(2)
      this.detail = data
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-malls-order-detail {
  width: 100%;
  .max-500 {
    max-width: 500px;
  }
  .cancel-img {
    width: 100px;
    height: 100px;
  }
  .copy-btn {
    width: 30px;
    height: 16px;
    font-size: 10px;
    background: #eeeeee;
    text-align: center;
    cursor: pointer;
  }
}
</style>
